<template>
    <div class="body">
        <div class="item">
            <div>商品类目ID：{{categoryForm.id}}</div>

            <div v-if="canUpdateName" style="display: flex;align-items: center;margin-left: 20px">
                <div>商品类目名称：</div>
                <a-input v-model:value="inputName" :defaultValue=categoryForm.name style="width: 200px"
                         placeholder="请输入商品类目名称"/>
            </div>
            <div v-else style="display: flex;align-items: center">
                <div>商品类目名称：{{categoryForm.name}}</div>
                <form-outlined style="margin-left: 10px" @click="editName"/>
            </div>

        </div>

        <div class="item" style="margin-top: 40px">
            <div>商品类目创建时间：{{categoryForm.createdTime}}</div>
            <div>商品类目更新时间：{{categoryForm.updatedTime}}</div>
        </div>

        <a-button @click="finishEdit" v-if="canUpdateName">提交</a-button>

    </div>
</template>

<script>
    import {request} from "@/utils/request";
    import api from "@/constants/api";
    import {message} from "ant-design-vue";

    export default {
        name: "CategoriesDetailPage",
        data() {
            return {
                categoryForm: {
                    id: '',
                    name: '',
                    createdTime: '',
                    updatedTime: '',
                },
                canUpdateName: false,
                inputName: '',
            }
        },

        mounted() {
            this.getCategoryDetail();
        },
        methods: {
            getCategoryDetail() {
                const categoryId = this.$route.query.id;
                const data = new FormData();
                data.append("id", categoryId);
                request({
                    url: api.GET_CATEGORY_BY_ID,
                    data: data,
                    method: "POST",
                }).then(res => {
                    this.categoryForm = {...this.categoryForm, ...res};
                })
            },

            editName() {
                this.canUpdateName = true
            },
            finishEdit() {
                let that = this;
                const data = new FormData();
                data.append("id", this.categoryForm.id);
                data.append("name", this.inputName);
                request({
                    url: api.UPDATE_CATEGORY,
                    data: data,
                    method: "POST",
                    pureData: false,
                }).then(res => {
                    if (res.code === 200) {
                        that.getCategoryDetail();
                        message.success("更新成功")
                        that.canUpdateName = false;
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .body {
        width: 500px;
        margin-left: 100px;
        margin-top: 100px;
    }

    .item {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
</style>